<template>
  <HeadContainer class="mine-settings-password" :title="$t('title.password')" @back="back">
    <v-form>
      <div class="mb-4 d-flex flex-column">
        <InputWrap
          v-model="form.oldPw.value"
          :label="$t('label.oldPw')"
          :placeholder="$t('placeholder.oldPw')"
          :err-msg="form.oldPw.error"
          password
        ></InputWrap>
      </div>
      <div>
        <InputWrap
          v-model="newPw"
          :label="$t('label.newPw')"
          :placeholder="$t('placeholder.newPw')"
          password
        ></InputWrap>
        <PasswordStrength :password="newPw"></PasswordStrength>
      </div>
      <PasswordValidation :password="newPw" @update:validate="(v) => (newValidate = v)"></PasswordValidation>
      <div>
        <v-divider></v-divider>
        <div class="mt-4">
          <div class="d-flex gap-row-16">
            <div @click="back" class="cancel-light-btn w-100 d-flex justify-center align-center">
              {{ $t('common.cancel') }}
            </div>
            <div @click="onSavePw()" class="primary-btn w-100 d-flex justify-center align-center">
              {{ $t('common.save') }}
            </div>
          </div>
        </div>
        <div v-if="saveErrMsg" class="text-start err-msg font-size-14 font-weight-400 line-height-120 text-primary-x">
          {{ saveErrMsg }}
        </div>
      </div>
    </v-form>
  </HeadContainer>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { VForm } from 'vuetify/components'
import { onKeyStroke } from '@vueuse/core'
import { usePopupMessageStore } from '@/store/popup-message'
import { $t } from '@/i18n'
import { useYup, validate } from '@/plugins/yup'
import InputWrap from '@/components/form/InputWrap.vue'
import PasswordStrength from '@/components/form/PasswordStrength.vue'
import PasswordValidation from '@/components/form/PasswordValidation.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import API from '@/http'

const emits = defineEmits(['toPage'])

function back() {
  emits('toPage', 2, 'settings')
  form.oldPw.value = ''
  form.oldPw.error = ''
  form.oldPw.check = false
  saveErrMsg.value = ''
}

const { open } = usePopupMessageStore()

const form = reactive({
  oldPw: {
    value: '',
    error: '',
    check: false,
  },
})

const yup = useYup()
const schemaOldPW = yup.string().required().min(8)

const newPw = ref('')
const saveErrMsg = ref('')
const newValidate = ref(false)

const onSavePw = () => {
  const validateOldPw = validate(schemaOldPW, form.oldPw)

  Promise.all([validateOldPw]).then(() => {
    console.log('這啥', newValidate.value)
    if (form.oldPw.check && newValidate.value) {
      console.log('前端驗證通過')
      savePw()
    } else {
      saveErrMsg.value = $t('common.error')
    }
  })
}

const savePw = async () => {
  try {
    const data = {
      passwd_old: form.oldPw.value,
      passwd_new: newPw.value,
    }
    await API.Auth.passwd({ data })
    console.log('這是data', data)
    open($t('common.setSuc'))
    emits('toPage', 1, 'mine')
    saveErrMsg.value = ''
  } catch (e) {
    saveErrMsg.value = e.message
  }
}

onKeyStroke('Enter', onSavePw)
</script>

<style lang="scss" scoped>
.strength {
  &-top {
    padding-top: 0.40625rem;
  }
  &-bar {
    border-radius: 0.21875rem;
    width: 1.52083125rem;
    height: 0.4375rem;
    background-color: rgb(var(--v-theme-graydisabled));
  }
}
</style>
